<template>
  <div class='registerFormDiv'>
    <el-container>
      <el-main>
        <el-form class="register-form" label-width="100px">
          <el-form-item label="用户名">
          <el-input size="large" v-model="user.userName" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input size="large" v-model="user.password" placeholder="请输入密码" type="password" show-password />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input size="large" v-model="user.confirmPassword" placeholder="请再次输入密码" type="password" show-password />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doRegister">注册</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { reactive } from "vue"
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'


const user = reactive({ userName: "", password: "", confirmPassword: "", role: "用户" })
const router = useRouter()

function doRegister() {
  if (user.password !== user.confirmPassword) {
    ElMessage.error("两次输入的密码不一致")
    return
  }
  axios.post("/tUsers/register", user).then(res => {
    if(res.data.code == 200){
      ElMessage.success("注册成功！")
      router.push("/login")
    } else {
      ElMessage.error("注册失败：" + res.data.message)
    }
  }).catch(err => {
    ElMessage.error("注册请求失败")
  })
}
</script>

<style scoped>
.registerFormDiv {
  max-width: 100%;
  background-image: url('@/assets/images/dog-1850465.jpg');
  background-size: cover;
  background-position: center;
  min-height: 825px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: -50px;
}
.register-form {
  margin: auto;
  width: 400px;
  height: auto;
  background-color: rgb(0,0,0,0.5);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px #999;
  margin-top: 200px;
}
.register-form :deep(.el-form-item__label) {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.register-form :deep(.el-input) {
  width: 100%;
}
.register-form :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.register-form :deep(.el-input__inner) {
  color: #333;
  font-size: 14px;
}
.register-form :deep(.el-input__inner::placeholder) {
  color: #999;
}
</style>
